<template>
  <a-card :bordered="false">
    <a-tabs @change="callback" default-active-key="1">
      <a-tab-pane tab="当前任职" key="1">
        <!-- 操作按钮区域 -->
        <div class="table-operator">
          <a-button
            v-if="!disabledButton"
            @click="handleAdd"
            type="primary"
            icon="plus"
            :disabled="isDisabledAuth('erpEmployeePostChangeRecord:add')">新增</a-button>
        </div>
        <!-- table区域-begin -->
        <div>
          <a-table
            ref="table"
            size="middle"
            :scroll="{x:'100%'}"
            bordered
            rowKey="id"
            :columns="columns"
            :dataSource="currentDataSource"
            :pagination="false"
            :loading="loading"
            class="j-table-force-nowrap"
            @change="handleTableChange">
            <template slot="status" slot-scope="status">
              <a-badge :status="status | statusTypeFilter" :text="status | statusFilter" />
            </template>
            <template slot="htmlSlot" slot-scope="text">
              <div v-html="text"></div>
            </template>
            <template slot="imgSlot" slot-scope="text">
              <span v-if="!text" style="font-size: 12px;font-style: italic;">无图片</span>
              <img
                v-else
                :src="getImgView(text)"
                height="25px"
                alt=""
                style="max-width:80px;font-size: 12px;font-style: italic;" />
            </template>
            <template slot="fileSlot" slot-scope="text">
              <span v-if="!text" style="font-size: 12px;font-style: italic;">无文件</span>
              <a-button
                v-else
                :ghost="true"
                type="primary"
                icon="download"
                size="small"
                @click="downloadFile(text)">
                下载
              </a-button>
            </template>

            <span slot="action" slot-scope="text, record">
              <a-button
                v-if="!disabledButton"
                class="ruleButton"
                :ghost="true"
                type="primary"
                icon="edit"
                @click="handleEdit(record)"
                :disabled="isDisabledAuth('erpEmployeePostChangeRecord:edit')" />
              <!-- <a-divider type="vertical" />
              <a-popconfirm title="确定删除吗?" @confirm="() => handleDelete(record.id)">
                <a-button v-if="!disabledButton" class="ruleButton" :ghost="true" type="primary" icon="delete"
                  :disabled="isDisabledAuth('erpEmployeePostChangeRecord:delete')" />
              </a-popconfirm> -->
            </span>

          </a-table>
        </div>
      </a-tab-pane>
      <a-tab-pane tab="曾经任职" key="2">
        <!-- table区域-begin -->
        <div>
          <a-table
            ref="table"
            size="middle"
            :scroll="{x:'100%'}"
            bordered
            rowKey="id"
            :columns="newColumns"
            :dataSource="oldDataSource"
            :pagination="false"
            :loading="loading"
            class="j-table-force-nowrap"
            @change="handleTableChange">
          </a-table>
        </div>
      </a-tab-pane>
    </a-tabs>
    <erp-employee-post-change-record-modal ref="modalForm" @ok="handleOk"></erp-employee-post-change-record-modal>
  </a-card>
</template>

<script>

import '@/assets/less/TableExpand.less'
import { mixinDevice } from '@/utils/mixin'
import { JeecgListMixin } from '@/mixins/JeecgListMixin'
import ErpEmployeePostChangeRecordModal from './modules/ErpEmployeePostChangeRecordModal'
import { DisabledAuthFilterMixin } from '@/mixins/DisabledAuthFilterMixin'
import { filterMultiDictText, initDictOptions } from '@/components/dict/JDictSelectUtil'

export default {
  name: 'ErpEmployeePostChangeRecordList',
  mixins: [JeecgListMixin, mixinDevice, DisabledAuthFilterMixin],
  components: {
    ErpEmployeePostChangeRecordModal
  },
  props: {
    disabledButton: {
      type: Boolean,
      default: false
    },
    newData: {
      type: Array,
      default: () => []
    }
  },
  data() {
    return {
      tabList: [
        {
          key: '1',
          tab: '当前任职'
        },
        {
          key: '2',
          tab: '曾经任职'
        }
      ],
      description: '员工岗位变更表管理页面',
      // 表头
      // columns: [],
      // 列设置
      settingColumns: [],
      // 列定义
      newColumns: [
        {
          title: '序号',
          dataIndex: '',
          key: 'rowIndex',
          width: 60,
          align: 'center',
          customRender: function (t, r, index) {
            return parseInt(index) + 1;
          }
        },
        {
          title: '团队',
          align: 'center',
          dataIndex: 'teamId',
          customRender: (text, r) => {
            if (!text) {
              return ''
            } else {
              return filterMultiDictText(this.dictOptions['teamId'], text + '')
            }
          },
          ellipsis: true
        },
        {
          title: '部门',
          align: 'center',
          dataIndex: 'departId',
          customRender: (text, r) => {
            if (!text) {
              return ''
            } else {
              return filterMultiDictText(this.dictOptions['departId'], text + '')
            }
          },
          ellipsis: true
        },
        {
          title: '岗位',
          align: 'center',
          dataIndex: 'postCode',
          customRender: (text, r) => {
            if (!text) {
              return ''
            } else {
              return filterMultiDictText(this.dictOptions['postCode'], text + '')
            }
          },
          ellipsis: true
        },
        {
          title: '岗位序列',
          align: 'center',
          dataIndex: 'positionCategory',
          customRender: (text, r) => {
            if (!text) {
              return ''
            } else {
              return filterMultiDictText(this.dictOptions['positionCategory'], text + '')
            }
          },
          ellipsis: true
        },
        {
          title: '职务级别',
          align: 'center',
          dataIndex: 'positionLevelId',
          customRender: (text, r) => {
            if (!text) {
              return ''
            } else {
              return filterMultiDictText(this.dictOptions['positionLevelId'], text + '')
            }
          },
          ellipsis: true
        },
        {
          title: '是否在岗',
          align: 'center',
          dataIndex: 'isDuty',
          customRender: (text, r) => {
            if (!text) {
              return ''
            } else {
              return filterMultiDictText(this.dictOptions['isDuty'], text + '')
            }
          },
          ellipsis: true
        },
        {
          title: '任职时间',
          align: 'center',
          dataIndex: 'workingTime',
          customRender: function (text) {
            return !text ? '' : (text.length > 10 ? text.substr(0, 16) : text)
          },
          ellipsis: true
        },
        {
          title: '备注',
          align: 'center',
          dataIndex: 'remark',
          ellipsis: true
        }
      ],
      columns: [
        {
          title: '序号',
          dataIndex: '',
          key: 'rowIndex',
          width: 60,
          align: 'center',
          customRender: function (t, r, index) {
            return parseInt(index) + 1;
          }
        },
        {
          title: '团队',
          align: 'center',
          dataIndex: 'teamId',
          customRender: (text, r) => {
            if (!text) {
              return ''
            } else {
              return filterMultiDictText(this.dictOptions['teamId'], text + '')
            }
          },
          ellipsis: true
        },
        {
          title: '部门',
          align: 'center',
          dataIndex: 'departId',
          customRender: (text, r) => {
            if (!text) {
              return ''
            } else {
              return filterMultiDictText(this.dictOptions['departId'], text + '')
            }
          },
          ellipsis: true
        },
        {
          title: '岗位',
          align: 'center',
          dataIndex: 'postCode',
          customRender: (text, r) => {
            if (!text) {
              return ''
            } else {
              return filterMultiDictText(this.dictOptions['postCode'], text + '')
            }
          },
          ellipsis: true
        },
        {
          title: '岗位序列',
          align: 'center',
          dataIndex: 'positionCategory',
          customRender: (text, r) => {
            if (!text) {
              return ''
            } else {
              return filterMultiDictText(this.dictOptions['positionCategory'], text + '')
            }
          },
          ellipsis: true
        },
        {
          title: '职务级别',
          align: 'center',
          dataIndex: 'positionLevelId',
          customRender: (text, r) => {
            if (!text) {
              return ''
            } else {
              return filterMultiDictText(this.dictOptions['positionLevelId'], text + '')
            }
          },
          ellipsis: true
        },
        {
          title: '是否在岗',
          align: 'center',
          dataIndex: 'isDuty',
          customRender: (text, r) => {
            if (!text) {
              return ''
            } else {
              return filterMultiDictText(this.dictOptions['isDuty'], text + '')
            }
          },
          ellipsis: true
        },
        {
          title: '任职时间',
          align: 'center',
          dataIndex: 'workingTime',
          customRender: function (text) {
            return !text ? '' : (text.length > 10 ? text.substr(0, 16) : text)
          },
          ellipsis: true
        },
        {
          title: '备注',
          align: 'center',
          dataIndex: 'remark',
          ellipsis: true
        },
        {
          title: '操作',
          dataIndex: 'action',
          align: 'center',
          fixed: 'right',
          width: 100,
          scopedSlots: {
            filterDropdown: 'filterDropdown',
            filterIcon: 'filterIcon',
            customRender: 'action'
          }
        }
      ],
      url: {
        list: '/api/erp/files/employee/erpEmployeePostChangeRecord/list',
        delete: '/api/erp/files/employee/erpEmployeePostChangeRecord/delete',
        deleteBatch: '/api/erp/files/employee/erpEmployeePostChangeRecord/deleteBatch',
        exportXlsUrl: '/api/erp/files/employee/erpEmployeePostChangeRecord/exportXls',
        importExcelUrl: 'api/erp/files/employee/erpEmployeePostChangeRecord/importExcel'
      },
      dictOptions: {},
      disableMixinCreated: true,
      superFieldList: [],
      currentDataSource: [],
      oldDataSource: []
    }
  },
  created() {
    this.getSuperFieldList();
    this.initColumns();
    // 加载数据字典信息
    this.initDictConfig();
  },
  computed: {
    importExcelUrl: function () {
      return `${window._CONFIG['domianURL']}/${this.url.importExcelUrl}`;
    }
  },
  watch: {
    $route(to, from) {
      //    this.url.list = this.url.list0 + this.$route.params.id;
      this.url.exportXlsUrl = this.url.exportXlsUrl0 + this.$route.params.id;
      this.url.importExcelUrl = this.url.importExcelUrl0 + this.$route.params.id;
      //    this.loadData();
    },
    newData(newValue) {
      if (newValue) {
        this.currentDataSource = newValue.filter(item => item.isDuty == '1');
        this.oldDataSource = newValue.filter(item => item.isDuty == '0');
      }
    }
  },
  methods: {
    callback(key) {
      console.log(key);
    },
    handleOk(val) {
      if (val.id) {
        let index = this.currentDataSource.findIndex(item => item.id === val.id)
        if (index > -1) {
          if (val.isDuty == '0') {
            this.currentDataSource.splice(index, 1);
            this.oldDataSource.push({ id: parseInt((Math.random() * 1000000000)).toString(), ...val })
          } else {
            this.currentDataSource.splice(index, 1, val)
          }
        }
      } else {
        if (val.isDuty == '0') {
          this.oldDataSource.push({ id: parseInt((Math.random() * 1000000000)).toString(), ...val })
        } else {
          this.currentDataSource.push({ id: parseInt((Math.random() * 1000000000)).toString(), ...val })
        }
      }
      this.dataSource = this.currentDataSource.concat(this.oldDataSource);
      this.$emit('ok', this.dataSource)
    },
    handleEdit: function (record) {
      this.$refs.modalForm.edit(record, this.currentDataSource, record.id)
      this.$refs.modalForm.title = '编辑'
      this.$refs.modalForm.disableSubmit = false
    },
    handleAdd: function () {
      this.$refs.modalForm.edit({
        'isDuty': '1',
        'isVirtual': '0',
        'employeeId': this.$route.params.id
      }, this.currentDataSource, '')
      this.$refs.modalForm.title = '新增'
      this.$refs.modalForm.disableSubmit = false
    },
    async initDictConfig() {
      initDictOptions('sys_depart,gradation_third_show,id').then(async(res) => {
        if (res.success) {
          this.$set(this.dictOptions, 'departId', res.result)
        }
      })
      initDictOptions('erp_omc_team_manager,alias_name,id').then(async(res) => {
        if (res.success) {
          this.$set(this.dictOptions, 'teamId', res.result)
        }
      })
      initDictOptions('sys_position,name,code,del_flag = 0').then(async(res) => {
        if (res.success) {
          this.$set(this.dictOptions, 'postCode', res.result)
        }
      })
      initDictOptions('erp_org_position_level,level_name,id,del_flag="0"').then(async(res) => {
        if (res.success) {
          this.$set(this.dictOptions, 'positionLevelId', res.result)
        }
      })
      initDictOptions('position_category').then(async(res) => {
        if (res.success) {
          this.$set(this.dictOptions, 'positionCategory', res.result)
        }
      })
      initDictOptions('YES_OR_NO').then(async(res) => {
        if (res.success) {
          this.$set(this.dictOptions, 'isDuty', res.result)
        }
      })
    },
    getSuperFieldList() {
      let fieldList = [];
      fieldList.push({ type: 'string', value: 'employeeId', text: '员工名称', dictCode: '' })
      fieldList.push({ type: 'string', value: 'teamId', text: '团队名称', dictCode: '' })
      fieldList.push({ type: 'string', value: 'departId', text: '部门名称', dictCode: '' })
      fieldList.push({ type: 'string', value: 'isDuty', text: '是否在岗', dictCode: '' })
      fieldList.push({ type: 'date', value: 'workingTime', text: '任职时间' })
      fieldList.push({ type: 'string', value: 'remark', text: '备注', dictCode: '' })
      this.superFieldList = fieldList
    }
  }
}
</script>
<style scoped>
@import '~@assets/less/common.less';
</style>
